<template>
    <div class="app-container">
        <HeadSearch
            v-show="showSearch"
            :searchData="searchData"
            labelWidth="100"
            :cascaderData01="[]"
            :cascaderData02="[]"
            @handleSearchChild="handleSearchChild(arguments)"
            >
        </HeadSearch>
        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table
            stripe
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="#" width="70" align="center" type="index"/>
            <el-table-column label="故事标题" align="center" prop="storyTitle" />
            
            <el-table-column label="头像" align="center" prop="headimgUrl" width="80">
                    <template slot-scope="scope">
                        <el-image
                            :src="preFix + scope.row.headimgUrl"
                            class="story-image"
                            :preview-src-list="[preFix + scope.row.headimgUrl]"
                            fit="cover"
                        >
                            <div slot="placeholder" class="image-slot">
                            加载中...
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
            
                <el-table-column label="昵称" align="center" prop="nickName" />
            <el-table-column label="点赞数" align="center" prop="voting" />
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                fixed="right"
                width="120px"
            >
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
    </div>
</template>

<script>
import { listVoteStory, delVoteStory } from "@/api/loveStory"; 

export default {
    name: "storiesThumbsUp",
    components: {},
    data() {
        return {
            // 搜索框配置
            searchData: [
                { type: "input", name: "故事标题:", key: "storyTitle", placeholder: "请输入故事标题" },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            preFix: process.env.VUE_APP_BASE_API,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 搜索框事件 + 重置事件
        handleSearchChild(data) {
            let querySearch = JSON.parse(JSON.stringify(data[0]));
            switch (data[1]) {
                case "search": // 搜索框
                    this.queryParams = querySearch;
                    this.handleQuery();
                    break;
                case "reset": // 重置按钮
                    this.queryParams = {};
                    this.queryParams.pageNum = 1;
                    this.queryParams.pageSize = 10;
                    this.getList();
                    break;
            }
        },
        /** 查询故事列表 */
        getList() {
            this.loading = true;
            listVoteStory(this.queryParams).then((response) => {
                response.rows.forEach(el=>{
                    el.voting = el.voting ? el.voting*1 : 0
                })
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm(
                '是否确认删除ID为"' + ids + '"的数据项?',
                "警告",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }
            )
            .then(function () {
                return delVoteStory(ids);
            })
            .then(() => {
                this.getList();
                this.$message.success("删除成功");
            });
        },
        // /** 点赞操作 */
        // handleVote(row) {
        //   this.$confirm("是否确认对该故事进行点赞?", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "info",
        //   })
        //     .then(() => {
        //         row.voting += 1; // 更新点赞数
        //         updateVoteStory({voting: row.voting}).then((response) => {
        //             if (response.success) {
        //             this.$message.success("点赞成功");
                    
        //             } else {
        //             this.$message.error("点赞失败");
        //             }
        //         });
        //     })
        //     .catch(() => {
        //       this.$message.info("已取消点赞操作");
        //     });
        // },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {};
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.getList();
        },
    },
};
</script>

<style scoped>

</style>